<!--
商城 - 动态页面组件（通过后台可视化搭建页面）
此组件作用是 通过一串json数组，直接渲染页面，可用于实现页面装修的渲染组件
支持渲染
图片 image（支持自由热区点击事件）
图片轮播 swiper
宫格按钮 grid-btn
文本 text
富文本 rich-text
按钮 button
-->
<template>
	<view class="vk-mall-dynamic-components">
		<view v-if="loading" class="loading-mask">
			<!-- 加载中 -->
			<view style="position: relative;">
				<!-- 此处可以直接修改加载图来达到修改加载动画 -->
				<image src="/static/loading.gif" style="width: 300rpx;height: 300rpx;position: absolute;top:400rpx;left:225rpx;" mode="aspectFill" ></image>
				<image src="/static/loading.gif" style="width: 150rpx;height: 150rpx;position: absolute;top:475rpx;left:300rpx;" mode="aspectFill" ></image>
			</view>
		</view>
		<view v-for="(item,index) in localdataCom" :key="item.data_id">
			<block v-if="item.show !== false">
				<!-- 图片 -->
			<!-- 	<block v-if="item.type === 'image'">
					<vk-data-image-map :src="item.data.src" :localdata="item.data.map" @click="imageMapClick" ></vk-data-image-map>
				</block> -->
				<!-- 图片轮播 -->
		<!-- 		<block v-if="item.type === 'swiper'">
					<u-swiper :list="item.data.list" :height="item.data.height" :border-radius="item.data.borderRadius" @click="swiperClick($event, item.data.list)"></u-swiper>
				</block> -->
				<!-- 宫格按钮 -->
				<block v-if="item.type === 'grid-btn'">
					<vk-mall-grid-btn :localdata="item.data" @click="gridBtnClick"></vk-mall-grid-btn>
				</block>
				<!-- 文本 -->
				<block v-if="item.type === 'text'">
					<text space="ensp">{{ item.data.text }}</text>
				</block>
				<!-- 富文本 -->
				<block v-if="item.type === 'rich-text'">
					<u-parse :html="item.data.content" :autoset-title="false" :lazy-load="true" :selectable="true"></u-parse>
				</block>
				<!-- 按钮 -->
				<block v-if="item.type === 'button'">
					<u-button
						:size="item.data.size"
						:type="item.data.type"
						:plain="item.data.plain"
						:hair-line="item.data.hairLine"
						:shape="item.data.shape"
						:open-type="item.data.openType"
						:session-from="item.data.sessionFrom"
						:send-message-title="item.data.sendMessageTitle"
						:send-message-path="item.data.sendMessagePath"
						:send-message-img="item.data.sendMessageImg"
						:show-message-card="item.data.showMessageCard"
					></u-button>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-dynamic-components",
	props: {
		// 本地数据源
		localdata:{
			Type:Array,
			default:function(){
				return [];
			}
		},
		// 是否请求后端获取数据
		isAction:{
			Type:Boolean,
			default:false
		},
		// 查询条件 id列表
		ids:{
			Type:Array
		},
		// 查询条件name
		name:{
			Type:String
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			loading:false,
			data:{
				list:[]
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			let that = this;
			let { vk, name, ids } = that;
			let actionData = { name, ids };
			// 请求带缓存
			vk.myfn.callFunctionForCache({
				url: "client/pub.getComponentsList",
				loading: { name:"loading", that },
				data: actionData,
				success: (data) => {
					that.data = data;
				}
			});
		},
		swiperClick(index,list){
			let item = list[index];
			this.pageTo(item.page);
		},
		gridBtnClick(item){
			this.pageTo(item.page);
		},
		imageMapClick({ item, index }) {
			this.pageTo(item.page);
		},
		pageTo(path){
			let { vk } = this;
			if (!path){
				return false;
			}
			if (path.indexOf("http") == 0) {
				vk.myfn.urlTo(path);
			} else {
				if (path.indexOf("/") !== 0) path = "/" + path;
				vk.navigateTo(path);
			}
		}
	},
	// 监听器
	watch:{

	},
	// 计算属性
	computed: {
		localdataCom(){
			return this.isAction ? this.data.list : this.localdata;
		}
	}
};
</script>

<style lang="scss" scoped>
	.loading-mask{
		position: fixed;
		top:0;
		left:0;
		width: 100vw;
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		background-color: var(--bgcolor);
		z-index: 99999999;
	}
</style>
